<template>
	<!-- 工作台相关 -->
	<n-config-provider :theme="darkTheme">
		<div class="my-chart">
			<div class="flex-col h100">
				<div class="flex m-between w100 my-chart-header">
					<header-left-btn></header-left-btn>
					<el-space>
						<my-icon class="f-s-20" icon="Fish" />
						<span>
							工作空间 -
							<span class="p-x-5">{{ $store.chart.editCanvasConfig.pageName }}</span>
						</span>
					</el-space>
					<header-right-btn></header-right-btn>
				</div>
				<div class="flex overflow-hidden h100">
					<div class="flex overflow-hidden h100">
						<!-- 组件选择 -->
						<content-charts></content-charts>
						<!-- 图层内容 -->
						<content-layers></content-layers>
					</div>
					<content-configurations></content-configurations>
				</div>
			</div>
			<!-- 右键 -->
			<my-contextmenu
				:show="$store.chart.rightMenuShow"
				:mousePosition="$store.chart.mousePosition"
				:data="menuOptions"
				@hide="$store.chart.rightMenuShow = false"
				@click="
					(item) => {
						if (item.fnHandle) {
							typeof item.fnHandle === 'string' ? $store.chart[item.fnHandle]() : item.fnHandle();
						}
					}
				"
			/>
		</div>
	</n-config-provider>
</template>

<script setup>
import { darkTheme } from 'naive-ui';

/**************************************************************头部 ***************************************************************/
import HeaderLeftBtn from './ContentHeader/headerLeftBtn.vue';
import HeaderRightBtn from './ContentHeader/headerRightBtn.vue';

/**************************************************************中部 ***************************************************************/
import ContentCharts from './ContentCharts/index.vue';
import ContentLayers from './ContentLayers/index.vue';

/**************************************************************右键菜单数组 ***************************************************************/
import { menuOptions } from './hooks/useContextMenu.hook';

/**************************************************************编辑部份 ***************************************************************/
import ContentConfigurations from './ContentConfigurations/index.vue';
// 画布记录初始化
$store.chart.canvasInit($store.chart.editCanvas);

/**************************************************************键盘事件***************************************************************/
import { useAddKeyboard, useRemoveKeyboard } from './hooks/useKeyboard.hook';
onMounted(() => {
	useAddKeyboard();
});
onUnmounted(() => {
	useRemoveKeyboard();
});
</script>

<style lang="scss" scoped>
@include b('chart') {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	@include linear-gradient-tb(var(--el-bg-color), var(--el-bg-color-page));
	&-header {
		margin-bottom: 2px;
		height: 50px;
		line-height: 50px;
		padding: 0 10px;
		border-bottom: 1px solid var(--el-border-color);
	}
}
</style>
